<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.username" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.phone" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地址</text>
			<text @tap="toggleTab('region')" class="input">{{ addressData.province + addressData.city + addressData.area }}</text>
			<!-- <text class="yticon icon-shouhuodizhi"></text> -->
		</view>
		<view class="row b-b">
			<text class="tit">详细地址</text>
			<input class="input" @change="getaddress" type="text" v-model="addressData.address" placeholder="楼号、门牌" placeholder-class="placeholder" />
		</view>

		<view class="row b-b">
			<text class="tit">邮编</text>
			<input class="input" type="text" v-model="addressData.post" placeholder="请输入邮编" placeholder-class="placeholder" />
		</view>
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.defaule" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		<button class="del-btn" v-if="isDisplay" @click="delAddress">删除收货地址</button>
		<w-picker mode="region" :defaultVal="regionDval" :areaCode="['33', '3301', '330108']" :hideArea="false" @confirm="onConfirm" ref="region" :timeout="true"></w-picker>
	</view>
</template>

<script>
import { msg } from '../../api/publicapi.js'
import wPicker from '@/components/w-picker/w-picker.vue'
export default {
	components: {
		wPicker
	},
	data() {
		return {
			// `province` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '省份',
			//  `city` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '城市',
			//  `area` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '地区',
			//  `address` varchar(128) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '具体地址',
			addressData: {
				id: '',
				username: '',
				phone: '',
				province: '点击选择地址',
				city: '',
				area: '',
				address: '',
				area: '',
				post: '000000',
				default: false
			},
			addlist: [],
			regionDval: ['北京市', '市辖区', '东城区'],
			isDisplay: false
		}
	},
	onLoad(option) {
		let title = '新增收货地址';
		this.addlist = uni.getStorageSync('addresslist')
		if (option.type === 'edit') {
			title = '编辑收货地址';
			this.isDisplay = true;
			this.addressData = JSON.parse(option.data)
		} else {
			if (this.addlist !== 'undefined' && this.addlist !== ''&&  this.addlist.length >0) {
			let 	id =this.addlist[this.addlist.length-1].id+1 
				this.addressData.id =  id
				
			} else {
				this.addlist = []
			
				this.addressData.id = 0
				
			}
			console.log(this.addressData.id)
		}

		this.manageType = option.type;
		uni.setNavigationBarTitle({
			title
		})
	},
	methods: {
		onConfirm(val) {
			console.log(val);
			//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
			// switch(this.mode){
			// 	case "date":
			// 		break;
			// }
			let addlist = val.checkArr;
			if (addlist[0] !== undefined) {
				this.addressData.province = addlist[0];
			}
			if (addlist[1] !== undefined) {
				this.addressData.city = addlist[1];
			}
			if (addlist[2] !== undefined) {
				this.addressData.area = addlist[2];
			}
		},
		switchChange(e) {
			this.addressData.default = e.detail.value;
		},
		toggleTab(str) {
			console.log('toggleTab',this.$refs)
			this.$refs[str].show();
		},
		//地图选择地址
		chooseLocation() {
			uni.chooseLocation({
				success: data => {
					let reg = /.+?(省|市|自治区|自治州|县|区)/g;
					console.log(data.address.match(reg));
					let addlist = data.address.match(reg);
					if (addlist[0] !== undefined) {
						this.addressData.province = addlist[0];
					}
					if (addlist[1] !== undefined) {
						this.addressData.city = addlist[1];
					}
					if (addlist[2] !== undefined) {
						this.addressData.area = addlist[2];
					}
					this.addressData.address = data.address;
				},
				fail: res => {
					if ((res.errMsg = 'chooseLocation:fail auth deny')) {
						msg('未授权获取地理位置，详细地址请填写省市区');
					}
				}
			});
		},
		getaddress() {
			let reg = /.+?(省|市|自治区|自治州|县|区)/g;

			let addlist = this.addressData.address.match(reg);
			if (addlist[0] !== undefined) {
				this.addressData.province = addlist[0];
			}
			if (addlist[1] !== undefined) {
				this.addressData.city = addlist[1];
			}
			if (addlist[2] !== undefined) {
				this.addressData.area = addlist[2];
			}
			console.log(this.addressData);
		},
		//提交
		confirm() {
			let data = this.addressData;
			console.log(data);
			if (!data.username) {
				msg('请填写收货人姓名');
				return;
			}
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)) {
				msg('请输入正确的手机号码');
				return;
			}
			if (!data.province || !data.city || !data.city) {
				msg('请填写省市区');
				return;
			}
			if (!data.address) {
				msg('请填写门牌号信息');
				return;
			}
			if (!data.post) {
				msg('邮编');
				return;
			}

			if (data.default === true) {
				for (var i = 0; i < this.addlist.length; i++) {
					this.addlist[i].default = false;
				}
				data.default = true;
			}
			
			this.manageType == 'edit' ? (this.addlist[data.id] = data) : this.addlist.push(data);

			uni.setStorageSync('addresslist', this.addlist);
			msg(`地址${this.manageType == 'edit' ? '修改' : '添加'}成功`);
			uni.navigateBack()
		},
		delAddress() {
			let index = this.addressData.id
			
			uni.showModal({
				title: '提示',
				content: '确认要删除该地址吗？',
				confirmColor:'#FF0000',
				success: function(res) {
					if (res.confirm) {
					
						// 先获取缓存中的内容
						let array = uni.getStorageSync('addresslist')
						
					
						for (let i = 0; i < array.length; i++) {
							if(array[i].id === index)
								array.splice(i,1)
						}
						// 重新设置缓存
						uni.setStorage({
							key: 'addresslist',
							data: array
						})
						
						uni.navigateBack()
						
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
			
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
.del-btn{
	color: #FF0000;
}
</style>
